<template>
  <van-nav-bar title="拼团详情" left-text="返回" left-arrow @click-left="onClickLeft"  />
  <van-card :key="groupGoods.id" :price="groupGoods.price" :origin-price="groupGoods.oldprice" :desc="groupGoods.detail"
    :title="groupGoods.product" :thumb="groupGoods.picture">
    <template #tags>
      <van-tag plain type="danger">还差一人拼团成功!</van-tag>
    </template>
    <template #footer>
      <van-button size="mini" style="width:80px" @click="closeBtn">取 消</van-button>
      <van-button type="danger" size="mini" @click="goPayment(groupGoods.id)">立即拼团！</van-button>
    </template>
  </van-card>
  <div class="g-cart">
    <h2>猜你喜欢</h2>
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" >
      <van-card v-for="item in goodsList" :key="item.id" :price="item.price" :title="item.product"
        :origin-price="item.oldprice" :thumb="item.picture">
      </van-card>
    </van-list>
  </div>
</template>

<script setup lang="ts">
import { getGroupsDetails } from '@/hooks/groupDetails'
import { useCart } from '@/hooks/collage'
const {  getCurrentGoods,goPayment,onClickLeft, groupGoods,closeBtn } = getGroupsDetails()

const { loading, finished, goodsList } = useCart(getCurrentGoods)

</script>

<style lang="scss" scoped>
.g-cart {
  margin-top: 50px;

  .van-card__thumb {
    width: 100%;
    height: 200px;
  }
}
</style>